<div class="content__title">
    <h1>
        Sortable 拖放
        <small>use <a href="//github.com/akserg/ng2-dnd" target="_blank">ng2-dnd</a> library.</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="8">
        <nz-card nzTitle="韦小宝老婆排名">
            <ul class="list-group" dnd-sortable-container [sortableData]="hiBaby">
                <li *ngFor="let item of hiBaby; let i = index"
                    class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
            </ul>
        </nz-card>
    </div>
    <div nz-col [nzMd]="8">
        <nz-card nzTitle="新排名">
            <ol>
                <li *ngFor="let item of hiBaby; let i = index">{{i + 1}}: {{item}}</li>
            </ol>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="8">
        <nz-card nzTitle="翻牌" [nzBordered]="false" nzNoPadding class="ant-card__pink">
            <div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="hiBabyLove">
                <ul class="list-group">
                    <li *ngFor="let item of hiBabyLove; let i = index"
                        class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </nz-card>
    </div>
    <div nz-col [nzMd]="8">
        <nz-card nzTitle="前半夜" [nzBordered]="false" nzNoPadding class="ant-card__green">
            <div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="frontMidnight">
                <ul class="list-group">
                    <li *ngFor="let item of frontMidnight; let i = index"
                        class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </nz-card>
    </div>
    <div nz-col [nzMd]="8">
        <nz-card nzTitle="后半夜" [nzBordered]="false" nzNoPadding class="ant-card__warning">
            <div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="afterMidnight">
                <ul class="list-group">
                    <li *ngFor="let item of afterMidnight; let i = index"
                        class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </nz-card>
    </div>
</div>
